import {View, Text, Image} from '@tarojs/components'
import { AtButton, AtBadge, AtRadio } from 'taro-ui'
import './index.scss'
import GlobalFooter from '../../components/GlobalFooter'
import questions from '../../data/question.json'
import {useEffect, useState} from "react";
import Taro from "@tarojs/taro";

export default () => {

  const [current, setCurrent] = useState<number>(1)
  const [currentOption, setCurrentQuestion] = useState(questions[0])
  const questionOptions = currentOption.options.map(option => {
    return {label: `${option.key}. ${option.value}`, value: option.key}
  })
  const [currentAnswer, setCurrentAnswer] = useState<string>()
  const [answerList] = useState<string[]>([])

  useEffect(() => {
    setCurrentQuestion(questions[current-1])
    setCurrentAnswer(answerList[current-1])
  }, [current])

  return (
    <View className='doQuestionPage'>
      {JSON.stringify(answerList)}
      <View className="at-article__h2 title">{current}、{currentOption.title}</View>
      <View className="options-wrapper">
        <AtRadio options={questionOptions} value={currentAnswer} onClick={value => {
          setCurrentAnswer(value)
          answerList[current-1] = value
        }}/>
      </View>
      { current < questions.length && (
        <AtButton type="primary" circle className="controlBtn" onClick={() => {
          setCurrent(current+1)
        }}
        // disabled={!currentAnswer}
        >下一题</AtButton> )
      }
      { current === questions.length && (
        <AtButton type="primary" circle className="controlBtn" onClick={() => {
          Taro.setStorageSync('answerList', answerList)
          Taro.reLaunch({
            url: '/pages/result/index',
          })
        }}>查看结果</AtButton> )
      }
      { current > 1 && (
        <AtButton circle className="controlBtn" onClick={() => {setCurrent(current-1)}}>上一题</AtButton> )
      }
      <GlobalFooter />
    </View>
  )
}
